<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>SLB</title>
    <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
    <link rel="stylesheet" href="css/index.css" type="text/css" />
    <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css"/>

<style type="text/css">
.fakeloader{position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 9999;background-image: url(../bgAll/img/bg.png);}
</style>
</head>
<!-- 页面背景 -->
<body class="wrap" style="-webkit-user-select:none;">
    <div class="fakeloader"></div>
    <div class="mod-star-list">
        <div class="inner">
        </div>
    </div>
    <!-- 页面主体 -->
    <!-- header Start -->
    <div id="header" class="mt12 clearfix" style="margin-left:10px">
        <div class="header-left">
            <a href="../CDN/index.html" class="clearfix">
                <div class="bg-next rotate5 btn"></div>
                <p>浏览下一个产品</p>
            </a>
        </div>
        <div class="header-right" >
            <div class="header-open">负载均衡<span style="color:#90b8f1;font-size:14px"></span><p>
                Server Load Balancer</p></div>
            </div>
        </div>
        <!-- header End -->
    <div class="slb-container clearfix">
       <div class="slb-silder fl">
                <div class="sib-img1"> <img class="rotate5" src="img/ecs.png"></div>
                <span class="slb-textA">负载均衡</span>
                <div class="left-number">
            <marquee style="color:#afcdf5; display: block;margin-bottom:10px;    margin-left: 52px;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="10" width="150";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:#afcdf5;margin-bottom:10px;  margin-left:20px;font-size: 10px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="10" width="150";>
                 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
        </div> 
                <div class="sib-img2"> <img class="rotate5" src="img/ecs.png"></div>
                <span class="slb-textB" >阿里云服务器</span>
                 <div class="left-numberA">
           
            <marquee style="color:#afcdf5;margin-bottom:10px;  margin-left:20px;font-size: 10px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="10" width="100";>
                 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
             <marquee style="color:#afcdf5; display: block;margin-bottom:10px;    margin-left: 52px;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="10" width="100";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>

        </div>
                
                <div class="sib-img3"> <img class="rotate5" src="img/ecs.png"></div>
                <span class="slb-textC" >阿里云服务器</span>
                 <div class="left-numberB">
            <marquee style="color:#afcdf5; display: block;margin-bottom:10px;    margin-left: 52px;font-size: 10px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="10" width="100";>
                01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
            <marquee style="color:#afcdf5;margin-bottom:10px;  margin-left:20px;font-size: 10px;" behavior="marquee" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="10" width="100";>
                 01 01 01 01 01 01 &nbsp;&nbsp;&nbsp;01 01 01 01 01 01 01 01 01
            </marquee>
        </div>
        </div>
             <!-- 六象限图 -->
        <div class="slb-content fr">
            <div class="stars">
                  <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4"></div>
    <div class="s5"></div>
    <div class="s6"></div>
    <div class="s7"></div>
            </div>
          
    <div class="slb-Ctext">
        <div class="slb-positionA">
                       <div class="">
                               流量分发
                          </div> 
                    </div>
                    <div class="slb-positionB">
                        <div class="">价格</div> 
                    </div>
                    <div class="slb-positionC">
                        <div class="">安全防护</div> 
                    </div>
                    <div class="slb-positionD">
                        <div class="">
                           
                               异地灾备
                          </div> 
                    </div>
                    <div class="slb-positionE">
                        <div class="">
                           
                              同城容灾
                          </div> 
                    </div>
                    <div class="slb-positionF">
                       <div class="">
                            高可用 
                          </div>  
                    </div>
    </div>  
    
           <div class="slb-quadrant" id="main"></div> 
        <!--功能介绍弹出层-->
          <div  class="slb-flox slb-common"><p class="p1">负载均衡支持含TCP，UDP，HTTP，HTTPS在内的多种协议，利用</p><p class="p2">负载均衡对多台服务器做流量后分发，轻松应对海量访问；支持最小</p><p class="p3">连接数，轮询等调度方法使得流量调度更均匀。</p></div> 
      <div  class="slb-price slb-common"><p class="p1">利用负载均衡，用户无需采购硬件</p><p class="p2">设备，免运维；私网实例带宽免费，</p><p class="p3">节约流量成本。</p></div>
        <div  class="slb-safe slb-common"><p class="p1">负载均衡支持访问控制白名单，实时</p><p class="p2">防御SYN Flood,CC,DDoS攻击,提</p><p class="p3">供web应用防护（WAF）,轻松过滤</p><p class="p4">攻击流量，使用更安全。</p></div>
        <div  class="slb-place slb-common"><p class="p1">负载均衡结合云解析提供全局负载均衡服务，将业务部署于不同地域，</p><p class="p2">可智能引导用户就近访问，自动屏蔽异常地域，使用更智能。</p></div>
       
        <div  class="slb-local slb-common"><p class="p1">负载均衡在同一地域下部署多个可用区，</p><p class="p2">一个可用区出现异常后自动切换到另一个</p><p class="p3">可用区，实现同城冗余。</p></div>
        <div  class="slb-unable slb-common"><p class="p1">负载均衡提供实时健康检查，自动屏蔽异</p><p class="p2">常服务器；支持热升级，维护对用户透明；</p><p class="p3">集群部署，消除单点，让高可用更简单。</p></div>
       
       
         </div>

        <!--联动方框-->
        <div class="slb-precinct fr">
            <!--进度条-->
            <div class="slb-num">
                <p class="slb-p">挂载服务器数量</p>
                <div id="box">
                    <div id="bg">
                        <div id="bgcolor" style="width: 174px"></div>
                    </div>
                    <div id="bt"></div>
                </div>
                 <div id="text"><span class="slb-num-textA">少</span><span class="slb-num-textB">多</span></div> 
            </div>
              <div class="slb-list">
          <ul class="clearfix">
            <li>安全<div class="onoffswitch fr">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox btn1" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <div class="onoffswitch-inner">
            <div class="onoffswitch-active">ON</div>
            <div class="onoffswitch-inactive">OFF</div>
        </div>
        <div class="onoffswitch-switch"></div>
    </label>
</div> </li>
            <li>全局负载均衡<div class="onoffswitch fr">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox btn2 " id="myonoffswitch1" checked>
    <label class="onoffswitch-label" for="myonoffswitch1">
        <div class="onoffswitch-inner">
            <div class="onoffswitch-active">ON</div>
            <div class="onoffswitch-inactive">OFF</div>
        </div>
        <div class="onoffswitch-switch"></div>
    </label>
    </div></li>
            <li>多可用区<div class=" onoffswitch fr">
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox btn3" id="myonoffswitch2" checked>
        <label class="onoffswitch-label" for="myonoffswitch2">

            <div class="onoffswitch-inner">
                <div class="onoffswitch-inactive" style="padding-right: 10px;
    background-color: #716a8c; color: #3a3045;
    text-align: right;">OFF</div>
                <div class="onoffswitch-active"  style="padding-left: 15px;
    background-color: #6b9bea;
  color: #373247;text-align: left;">ON</div>   
            </div>
            <div class="onoffswitch-switch off"></div>
        </label>
        </div>
    </li>
</ul>
   </div>
        </div>
</div>
<footer class="clearfix">
    <div class="footer-left fl">
        <a href="../index/index.html?goods=goods3" class="back shineAction"></a>
        <div class="backText">返回主菜单</div>
    </div>
    <div class="footer-right fr">
        <a href="" class="refresh shineAction"></a>
        <div class="refreshText">刷新&nbsp;</div>
    </div>
</footer>
</body>
<script type="text/javascript" src='../bgAll/js/jquery-1.11.1.min.js'></script>
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $(".fakeloader").fakeLoader({
        timeToHide: 1000,
        bgColor:"#000",
        spinner:"spinner5"
    });
});
</script>
<script type="text/javascript" src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript" src='../bgAll/js/star.js'></script>
<script type="text/javascript" src="../bgAll/js/dist/echarts.js"></script>
<script type="text/javascript" src='js/slb-file.js'></script>

</html>
